<template>
	<div class="like" @click="onLike">
		<img :src="(readOnly?like:Like)?yesSrc:noSrc" alt="">
		<div class="text">{{readOnly?count:Count}}</div>
	</div>
</template>
<script>
import yesSrc from './images/like.png'
import noSrc from './images/like@dis.png'
export default{
	name:'Like',
	data(){
		return{
		 	yesSrc:yesSrc,
  		noSrc:noSrc,
  		Count:0,
  		Like:false
		}
	},
	props:{
		like:Boolean,
    count:Number,
    readOnly:Boolean
	},
	mounted(){
		
	},
	methods:{
		onLike(){
			if(this.readOnly){
				return
			}
			let Like=this.Like
			let Count=this.Count
			let countNow=Like?Count-1:Count+1
			this.Count=countNow
			this.Like=!this.Like
			let behavior=this.Like?'like':'cancel'
			this.$emit('like',{
				behavior:behavior
			})
		}
	},
	watch:{
		like(){
			this.Like=this.like
		},
		count(){
			this.Count=this.count
		}
	}
}
</script>
<style lang="stylus" scoped>
.like{display: inline-flex;flex-direction:row;padding:5px;width:45px;}
.like img{width:16px;height:14px;}
.like .text{color:#bbb;position:relative;left:3px;bottom:5px;line-height:12px;font-size:12px;}	
</style>
